<link rel="import" href="packages/spark_widgets/spark_split_view/spark_split_view.html">

<polymer-element name="example-ui">
  <template>
    <link rel="stylesheet" href="../common/example_ui.css">

    <style>
      spark-split-view {
        margin: 20px;
        border: 1px solid black;
      }

      [beforeSplit] {
        background-color: lightblue;
      }

      [afterSplit] {
        background-color: lightgreen;
      }

      [direction=left], [direction=right] {
        width: 400px;
        height:200px;
      }

      [direction=up], [direction=down] {
        width: 200px;
        height:400px;
      }
    </style>

    <div class="col-flex">
      <spark-split-view direction="left">
        <div beforeSplit>left (resize)</div>
        <div afterSplit>right (flex)</div>
      </spark-split-view>

      <spark-split-view direction="right">
        <div beforeSplit>left (flex)</div>
        <div afterSplit>right (resize)</div>
      </spark-split-view>
    </div>

    <div class="row-flex">
      <spark-split-view direction="up">
        <div beforeSplit>top (resize)</div>
        <div afterSplit>bottom (flex)</div>
      </spark-split-view>

      <spark-split-view direction="down">
        <div beforeSplit>top (flex)</div>
        <div afterSplit>bottom (resize)</div>
      </spark-split-view>
    </div>
  </template>

  <script type="application/dart" src="example_ui.dart"></script>
</polymer-element>
